<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255, 255, 255, 0);"
  >
    <div class="comCard">
      <Card dis-hover>
        <div
          class="comLabel"
          style=" padding:15px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#E6E6E6; font-size:16px; font-weight:bold;"
        >
          <p>
            &nbsp;人员详情
          </p>
        </div>
        <Form :label-width="120" style=" width:600px; padding:40px; ">
          <FormItem label="用户姓名">
            <Input
              type="text"
              :disabled="true"
              placeholder="请输入用户姓名"
              :maxlength="200"
              size="default"
              v-model="detailsForm.fullName"
            ></Input>
          </FormItem>
          <FormItem label="用户昵称">
            <Input
              type="text"
              :disabled="true"
              placeholder="请输入用户昵称"
              :maxlength="200"
              size="default"
              v-model="detailsForm.nickname"
            ></Input>
          </FormItem>

          <FormItem label="部门记录ID">
            <Select
              placeholder="请选择部门"
              size="default"
              :disabled="true"
              :transfer="true"
              not-found-text="no"
              placement="bottom-start"
              v-model="detailsForm.departmentRecordId"
              @on-open-change="deptSelectOpenSelect"
            >
              <Option
                v-for="(item, index) in deptSelectList"
                :value="item.value"
                :label="item.label"
                :key="index"
                :disabled="item.disabled"
              >
                <span>
                  {{ item.label }}
                </span>
                <span style="float:right;color:#ccc">
                  {{ item.value }}
                </span>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="手机号">
            <Input
              type="number"
              :disabled="true"
              placeholder="请输入手机号"
              :maxlength="200"
              size="default"
              v-model="detailsForm.mobilePhone"
            ></Input>
          </FormItem>
          <FormItem label="出生日期">
            <DatePicker
              placeholder="请选择日期"
              type="date"
              size="default"
              :disabled="true"
              :clearable="true"
              format="yyyy-MM-dd"
              separator="-"
              v-model="detailsForm.birthDate"
            ></DatePicker>
          </FormItem>
          <FormItem label="性别">
            <Radio-group v-model="detailsForm.sex">
              <Radio
                v-for="(item, index) in sexGroupList"
                :label="item.value"
                :key="index"
                :disabled="item.disabled"
              >
                {{ item.label }}
              </Radio>
            </Radio-group>
          </FormItem>
          <FormItem label="头像地址">
            <Input
              type="text"
              :disabled="true"
              placeholder="请输入头像地址"
              :maxlength="200"
              size="default"
              v-model="detailsForm.headImageUrl"
            ></Input>
          </FormItem>
          <div class="comCascader">
            <FormItem label="省份">
              <Cascader
                placeholder="请选择省份"
                trigger="click"
                size="default"
                :disabled="true"
                v-model="detailsForm.province"
                :data="area"
              ></Cascader>
            </FormItem>
          </div>
          <FormItem label="住址">
            <Input
              type="text"
              :disabled="true"
              placeholder="请输入住址"
              :maxlength="200"
              size="default"
              v-model="detailsForm.address"
            ></Input>
          </FormItem>

          <FormItem label="学历">
            <Select
              placeholder="请选择学历"
              size="default"
              :disabled="true"
              not-found-text="no"
              placement="bottom-start"
              v-model="detailsForm.educationalBackground"
            >
              <Option
                v-for="(item, index) in xueliList"
                :value="item.value"
                :label="item.label"
                :key="index"
                :disabled="item.disabled"
              >
                <span>
                  {{ item.label }}
                </span>
                <span style="float:right;color:#ccc">
                  {{ item.value }}
                </span>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="在职">
            <i-switch
              size="large"
              sprepend="在职"
              sappend="离职"
              :disabled="true"
              v-model="detailsForm.job"
            >
              <span slot="open">在职</span>
              <span slot="close">离职</span>
            </i-switch>
          </FormItem>

          <FormItem label="锁定标记">
            <Select
              placeholder="请选择"
              size="default"
              :disabled="true"
              not-found-text="no"
              placement="bottom-start"
              v-model="detailsForm.lockSign"
            >
              <Option
                v-for="(item, index) in lockList"
                :value="item.value"
                :label="item.label"
                :key="index"
                :disabled="item.disabled"
              >
                <span>
                  {{ item.label }}
                </span>
                <span style="float:right;color:#ccc">
                  {{ item.value }}
                </span>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input
              type="textarea"
              :disabled="true"
              placeholder="请输入备注信息"
              :maxlength="200"
              :rows="5"
              size="default"
              v-model="detailsForm.remarks"
            ></Input>
          </FormItem>

          <FormItem>
            <div class="comButton" style=" text-align:left;">
              <div class="btnGroup">
                <Button
                  icon="md-refresh"
                  type="default"
                  size="default"
                  @click="gotoPage('/features/personnel/personList')"
                  style=" width:120px;"
                >
                  返回
                </Button>
              </div>
            </div>
          </FormItem>
        </Form>
      </Card>
    </div>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      detailsForm: {
        fullName: "",
        nickname: "",
        departmentRecordId: "",
        mobilePhone: "",
        birthDate: "2020-04-15",
        sex: "",
        headImageUrl: "",
        province: ["四川", "成都市", "双流县"],
        address: "",
        educationalBackground: "",
        job: true,
        lockSign: "",
        remarks: "",
      },
      formList: ["detailsForm"],
      deptSelectList: [
        { label: "hajksdhfkahskdf", value: "3" },
        { label: "wer", value: "9" },
        { label: "wer", value: "23" },
        { label: "阿拉丁福建省", value: "30" },
        { label: "阿斯蒂芬", value: "32" },
        { label: "阿斯蒂芬2222", value: "33" },
        { label: "hajksdhfkahskdf", value: "36" },
        { label: "wer", value: "37" },
        { label: "111", value: "38" },
        { label: "阿斯蒂芬", value: "39" },
        { label: "123", value: "40" },
        { label: "2323", value: "41" },
        { label: "asdf123123", value: "43" },
        { label: "hajksdhfkahskdf", value: "44" },
        { label: "hajksdhfkahskdf", value: "45" },
        { label: "asdf", value: "46" },
        { label: "3033", value: "47" },
        { label: "wer", value: "48" },
        { label: "wer", value: "49" },
        { label: "wer3333", value: "50" },
        { label: "wer", value: "51" },
        { label: "wer3333", value: "53" },
        { label: "1111", value: "54" },
        { label: "999999", value: "55" },
        { label: "666666", value: "56" },
      ],
      sexGroupList: [
        { label: "男", value: "2", icon: "", disabled: true },
        { label: "女", value: "1", icon: "", disabled: true },
        { label: "未知", value: "3", icon: "", disabled: true },
      ],
      xueliList: [
        { label: "本科", value: "1" },
        { label: "研究生", value: "2" },
        { label: "博士", value: "3", disabled: false },
        { label: "博士后", value: "4", disabled: false },
      ],
      lockList: [
        { label: "正常", value: "0" },
        { label: "锁定", value: "1" },
        { label: "禁止", value: "2", disabled: false },
      ],
      pageRecordId: "443",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {
    this.getpersonDetailsDetail();
  },
  methods: {
    async deptSelectOpenSelect(open) {
      if (open) {
        this.axios
          .post("/sys/sysDepartment/departmentNameSelect", {})
          .then(resp => {
            const { code, message, data } = resp.data;
            if (code === "E0") {
              let selectArr = data.map(item => {
                return {
                  label: item.value,
                  value: item.key.toString(),
                };
              });
              this.deptSelectList = selectArr;
            }
          });
      }
    },
    deptSelectInit() {
      this.deptSelectEcharts = echarts.init(
        this.$refs.deptSelectLine,
        this.deptSelectTheme,
      );
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.deptSelectData).length === 0) {
        this.deptSelectEcharts.setOption(this.deptSelectChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.deptSelectData.seriesList.forEach(item => {
          if (item.chartType === "line") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.deptSelectChartOptions.legend.data = legendArr;
        this.deptSelectChartOptions.series = newSeries;
        this.deptSelectEcharts.setOption(this.deptSelectChartOptions);
      }
    },

    async xueliOpenSelect(open) {
      if (open) {
        this.axios.post("", {}).then(resp => {
          const { code, message, data } = resp.data;
          if (code === "E0") {
            let selectArr = data.map(item => {
              return {
                label: item.value,
                value: item.key.toString(),
              };
            });
            this.xueliList = selectArr;
          }
        });
      }
    },
    xueliInit() {
      this.xueliEcharts = echarts.init(this.$refs.xueliLine, this.xueliTheme);
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.xueliData).length === 0) {
        this.xueliEcharts.setOption(this.xueliChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.xueliData.seriesList.forEach(item => {
          if (item.chartType === "line") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.xueliChartOptions.legend.data = legendArr;
        this.xueliChartOptions.series = newSeries;
        this.xueliEcharts.setOption(this.xueliChartOptions);
      }
    },

    async lockOpenSelect(open) {
      if (open) {
        this.axios.post("", {}).then(resp => {
          const { code, message, data } = resp.data;
          if (code === "E0") {
            let selectArr = data.map(item => {
              return {
                label: item.value,
                value: item.key.toString(),
              };
            });
            this.lockList = selectArr;
          }
        });
      }
    },
    lockInit() {
      this.lockEcharts = echarts.init(this.$refs.lockLine, this.lockTheme);
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.lockData).length === 0) {
        this.lockEcharts.setOption(this.lockChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.lockData.seriesList.forEach(item => {
          if (item.chartType === "line") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.lockChartOptions.legend.data = legendArr;
        this.lockChartOptions.series = newSeries;
        this.lockEcharts.setOption(this.lockChartOptions);
      }
    },

    getpersonDetailsDetail() {
      if (!this.$route.query.recordId) return;
      const data = JSON.stringify({ recordId: this.$route.query.recordId });
      this.axios.post("/sys/sysPersonnel/findKey", { data }).then(resp => {
        const { code, message, data } = resp.data;
        if (code === "E0") {
          this.detailsForm = { ...this.detailsForm, ...data };

          this.detailsForm.province = areaValue(
            this.area,
            this.detailsForm.province,
          );
        } else {
          this.$Message.error(message);
        }
      });
    },

    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
